import BreadCrumb from '@/components/BreadCrumb';
import ProSearch from '@/components/ProSearch';
import { Button, Card, Flex, Popconfirm, Space, Table } from 'antd';
import { memo, useEffect, useState } from 'react';
import { useModel } from 'umi';
import AddOrUpdate from './addOrUpdate';
import ResetPassword from './resetPassword';
const TagManagePage: React.FC = () => {
  const {
    pageData,
    pagePagination,
    pageDataAction,
    setPagePagination,
    pageParams,
    setPageParams,
    deleteAction,
  } = useModel('usersModel');
  const { total, current, size } = pagePagination;

  const paginationConfig = {
    current: current,
    pageSize: size,
    total: total,
    onChange: (page: number, pageSize: number) => {
      setPagePagination({
        ...pagePagination,
        current: page,
        size: pageSize,
      });
      pageDataAction();
    },
  };
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '账号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '电话',
      dataIndex: 'telPhone',
      key: 'telPhone',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (record: any) => (
        <Space size="middle">
          <a onClick={() => editHandle(record)}>编辑</a>
          <a onClick={() => reSetHandle(record)}>重置密码</a>

          <Popconfirm
            title="提示"
            description="删除无法恢复，确定删除吗？"
            onConfirm={() => deleteHandle(record)}
            onOpenChange={() => console.log('open change')}
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [addOrUpdateOpen, setAddOrUpdateOpen] = useState(false);
  const [addOrUpdateTitle, setAddOrUpdateTitle] = useState('新增标签');
  const [addOrUpdateData, setAddOrUpdateData] = useState(null);

  const [resetPasswordOpen, setResetPasswordOpen] = useState(false);
  const [resetPasswordData, setResetPasswordData] = useState(null);

  // 新增
  function addHandle() {
    setAddOrUpdateOpen(true);
    setAddOrUpdateTitle('新增');
  }
  // 修改
  function editHandle(_row: any) {
    setAddOrUpdateOpen(true);
    setAddOrUpdateTitle('编辑');
    setAddOrUpdateData(_row);
  }
  // 修改密码
  function reSetHandle(_row: any) {
    setResetPasswordOpen(true);
    setAddOrUpdateTitle('编辑');
    setResetPasswordData(_row);
  }
  // 删除
  async function deleteHandle(_row: any) {
    await deleteAction([_row.id], true);
  }
  // 关闭弹框
  function closeAddOrUpdate() {
    setAddOrUpdateOpen(false);
  }
  // 关闭修改密码弹框
  function closeResetPassword() {
    setResetPasswordOpen(false);
  }
  // 搜索
  function searchHandle(e: any) {
    setPageParams(e || {});
    pageDataAction(e);
  }

  useEffect(() => {
    pageDataAction(pageParams);
  }, []);

  return (
    <>
      <BreadCrumb />
      <ProSearch
        onSearch={searchHandle}
        data={[
          {
            label: '账号',
            name: 'name',
            type: 'input',
            placeholder: '请输入账号',
          },
        ]}
      ></ProSearch>
      <Card variant="borderless" style={{ marginTop: '20px' }}>
        <Flex gap="small" wrap style={{ marginBottom: '20px' }}>
          <Button color="primary" variant="outlined" onClick={addHandle}>
            新增
          </Button>
        </Flex>
        <Table dataSource={pageData} columns={columns} pagination={paginationConfig} />
      </Card>
      <AddOrUpdate
        open={addOrUpdateOpen}
        onClose={closeAddOrUpdate}
        title={addOrUpdateTitle}
        data={addOrUpdateData}
      ></AddOrUpdate>
      <ResetPassword
        open={resetPasswordOpen}
        onClose={closeResetPassword}
        title="重置密码"
        data={resetPasswordData}
      ></ResetPassword>
    </>
  );
};

export default memo(TagManagePage);
